<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>部门管理</title>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../layui/layui.js"></script>
<!--    <script src="js/jquery-1.9.1.min.js"></script>-->
</head>
<style>
    #saveOrUpdateDiv{
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<body>
<!-- 增加/修改弹出层div开始（共用）（隐藏） -->
<div style="display: none;" id="saveOrUpdateDiv">
    <form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item" style="visibility: hidden;">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input style="width: 250px" type="text" name="id" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input style="width: 250px" type="text" name="name" required  lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">部门编号</label>
            <div class="layui-input-block">
                <input style="width: 250px" type="text" name="sn" required  lay-verify="required" placeholder="请输入部门编号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 增加/修改弹出层div结束 -->

<!-- 主界面开始 -->
<div class="box">
    <div class="layui-card">
        <div class="layui-card-header" ><h1 style="color: #1E9FFF;"><strong>部门管理</strong></h1></div>
        <div class="layui-card-body">
            <table class="layui-table" id="table" lay-filter="test"></table>
        </div>
    </div>
</div>
<!-- 主界面结束 -->

<!-- 头部工具栏 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="insert">新增</button>
    </div>
</script>

<!-- 行工具栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    
    //声明要使用的layUI组件（全局）
    layui.use(["table","form","laypage"],function(){
        var table = layui.table;
        var form = layui.form;
        var $ =layui.jquery;
        var laypage = layui.laypage;

        $.ajaxSetup({
                // 发送cookie
                xhrFields: {
                    withCredentials: true
                }
            });
        //前端接口（URL）接受后端数据进行数据表格的渲染

        $.ajaxSetup({
                // 发送cookie
                xhrFields: {
                    withCredentials: true
                }
            });
            
        var tableIns = table.render({
            elem:'#table',
            toolbar: '#toolbarDemo',
            url:'http://localhost:8888/depart/list',
            parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.data.msg, //解析提示文本
                        "count": res.data.count, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                },

            //表头设置
            cols:[[
                {field:'select',type:"checkbox"},
                {field:'id',title:'部门id',sort:true},
                {field:'name',title:'部门名称'},
                {field:'sn',title:'部门编号',sort:true},
                {field:'操作',title:'操作',toolbar:'#barDemo',fixed:'right'}
            ]],
            //分页
            page:{
                layout:['prev','page','next','count','limit','skip']//,'limit','skip'
                ,page:function(res){
                    return res.page
                } //获取currentPage

                    // ,limit:function(res){
                    //     return res.limit
                    // }//获取pageSize
                    ,groups:10 //最多显示几个跳页按钮
                    ,first:true //显示首页
                    ,last:true  //显示尾页
                }
            // page:true//开启分页
        });

        //分页组件参数接口
        laypage.render({
            elem: 'pageTest' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: 10//数据总数，从服务端得到
            ,limit:5
        });

        //头部工具栏监听事件
        table.on('toolbar(test)',function (obj){
            //打印事件名
            console.log(obj);
            var checkStatus = table.checkStatus(obj.config.id);
            console.log(checkStatus);

            // 获取事件名
            var eventName = obj.event;
            switch (eventName){
                case "getCheckData":
                    var arr = checkStatus.data;
                    layer.alert(JSON.stringify(arr));
                    break;
                case "getCheckLength":
                    var arr = checkStatus.data;
                    layer.msg("选中了"+arr.length+"条数据！")
                    break;
                case "isAll":
                    var flag = checkStatus.isAll;
                    var str = flag ? '全选' : '未全选' ;
                    layer.msg(str);

                    break;
                    //若点击“新增”按钮，进入该事件，调用新增方法openAdd();
                case "insert":
                    openAdd();

                default:
                    break;
            };
        });
        //行工具栏事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){ //删除
                console.log(data);
                // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.confirm('确认删除数部门：'+data.name, function(index){
                    // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    console.log("删除的是", data.id)
                    
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: 'http://localhost:8888/depart/delete',
                        data: {
                            id: data.id
                        },success(res){
                            tableIns.reload();
                            console.log("删除成功！")
                        },error:function(){
                            alert("删除失败");
                        },
                    })
                });
            } else if(layEvent === 'edit'){ //点击修改进入该事件，调用修改方法
                    openUpdate(data);
                    var obj = $("[name='id']").val();
                }
        });
        //统一定义接口变量名和弹出层变量名（方便监听提交表单和关闭弹出层使用）
        var url;
        var mainIndex;
        //新增方法（函数）
        function  openAdd(){
            //弹出层
            mainIndex=layer.open({
                type:1,
                title:'新增',
                content:$("#saveOrUpdateDiv"),
                area:['600px','400px'],
                success:function (){
                    $("#dataFrm")[0].reset(); //清空表单数据（清除编辑表单回显的数据）
                    url = "http://localhost:8888/depart/insert";
                }
            });
        }
        //修改方法（函数）
        function openUpdate(data){
            //弹出层
            console.log("修改的值为data:", data)
            mainIndex=layer.open({
                type:1,
                title:'编辑',
                content:$("#saveOrUpdateDiv"),
                area:['600px','400px'],
                success:function (index){
                    form.val("dataFrm",data);//数据回显
                    url="http://localhost:8888/depart/update";
                }
            })
        }

        // 新增/编辑表单监听提交
        form.on('submit(doSubmit)', function(obj){
            var params = $("#dataFrm").serialize();
            //打印获取到的表单参数和新增/编辑函数中设定的URL接口
            alert(params);
            alert(url);

            //发送新增/编辑请求
            $.post(url,params,function(data) {
                console.log("data", data)
                //关闭弹出层
                layer.close(mainIndex);
                //刷新表格
                tableIns.reload();
            })
            return false
        });
    });
</script>
</body>
</html>